<template>
  <div class='container'>
    <el-card style="margin:10px">
      <!-- 上部选择框 -->
      <el-row type="flex" justify="space--between" style="padding-bottom:15px">
        <el-col style="color:pink;font-size:12px">
          说明：目前支持学科和关键字条件筛选
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="small" type="success" @click="$router.push('/questions/new')">
              <i class="el-icon-edit"></i>
              新增试题
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- ---------------------------- -->
      <el-row type="flex" justify="space-between">
        <el-form label-width="120px">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="form.subjectList" placeholder="请选择">
                <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.secondDirectoryList" placeholder="请选择">
                <el-option v-for="item in secondDirectoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tagsList" placeholder="请选择">
                <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keywords" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- ---------------------------- -->
      <el-row type="flex" justify="space-between">
        <el-form label-width="120px">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionsList" placeholder="请选择">
                <el-option label="单选" value="单选"></el-option>
                <el-option label="多选" value="多选"></el-option>
                <el-option label="简答" value="简答"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficultyList" placeholder="请选择">
                <el-option label="简单" value="简单"></el-option>
                <el-option label="一般" value="一般"></el-option>
                <el-option label="困难" value="困难"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.directionList" placeholder="请选择">
                <el-option label="o2o" value="o2o"></el-option>
                  <el-option label="外包服务" value="外包服务"></el-option>
                  <el-option label="企业服务" value="企业服务"></el-option>
                  <el-option label="互联网金融" value="互联网金融"></el-option>
                  <el-option label="企业咨询" value="企业咨询"></el-option>
                  <el-option label="互联网" value="互联网"></el-option>
                  <el-option label="电子商务" value="电子商务"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.inputList" placeholder="请选择">
                <el-option v-for="item in inputList" :key="item.value" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- ---------------------------- -->
      <el-row type="flex" justify="space-between">
        <el-form label-width="120px">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.topicRemark"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.companyName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="城市">
              <el-row type="flex" justify="space-between">
                <el-col :span="11">
                  <el-select @change="citys" v-model="formArea.provincesList" placeholder="请选择">
                    <el-option v-for="item in formAreaList.provincesList" :key="item" :label="item" :value="item"></el-option></el-select>
                </el-col>
                <el-col :span="11">
                  <el-select v-model="formArea.citysList" placeholder="请选择">
                    <el-option v-for="item in formAreaList.citysList" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-row>
          </el-col>
        </el-form>
      </el-row>

      <!-- 中部小插曲 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable='false'
        >
      </el-alert>

      <!-- 下部对应内容 -->
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="试题编号" prop="number" width="140"></el-table-column>
          <el-table-column label="学科" prop="subject" width="120"></el-table-column>
          <el-table-column label="目录" prop="catalog" width="140"></el-table-column>
          <el-table-column label="题型" prop="questionType" width="120">
            <template v-slot='{row}'>
              <div v-html="row.questionType==='1'?'单选':(row.questionType==='2'?'多选':'简答')"></div>
            </template>
          </el-table-column>
          <el-table-column label="题干" prop="question" width="300">
            <template v-slot="{row}">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addDate" width="200">
            <template v-slot="{row}">
              <div>{{row.addDate | parseTimeByString }}</div>
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="difficulty" width="120">
            <template v-slot="{row}">
              <div v-html="row.difficulty ==='1'?'简单':(row.difficulty==='2'?'一般':'困难')"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator" width="140"></el-table-column>
          <el-table-column label="操作" width="240">
            <template v-slot="{ row }">
              <el-button type="primary" @click="View(row)" icon="el-icon-view" circle plain></el-button>
              <el-button type="success" @click="Edit(row.id)" icon="el-icon-edit" circle plain></el-button>
              <el-button type="danger" @click="Delete(row)" icon="el-icon-delete" circle plain></el-button>
              <el-button type="warning" @click="Check(row.id)" icon="el-icon-check" circle plain></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!-- 最下面的页码 -->
      <el-row type="flex" justify="end">
        <el-pagination
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[4,7,10]"
          :page-size="pageTable.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage">
         </el-pagination>
      </el-row>
    </el-card>

    <!-- 点击View查看 -->
    <el-dialog title="题目预览" :visible.sync='isShow'>
      <QuestionPreview></QuestionPreview>
    </el-dialog>
  </div>
</template>

<script>
import { simple1 } from '@/api/hmmm/subjects.js'
import { simple2 } from '@/api/hmmm/directorys.js'
import { simple3 } from '@/api/hmmm/tags.js'
import { simple4 } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import QuestionPreview from '@/module-hmmm/components/questions-preview'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      isShow: false, // View表格查看
      subjectList: [], // 学科简单列表
      secondDirectoryList: [], // 二级目录
      tagsList: [], // 标签列表
      inputList: [], // 录入人列表
      form: {
        subjectList: '', // 学科简单列表
        secondDirectoryList: '', // 二级目录列表
        tagsList: '', // 标签列表
        keywords: '', // 关键字
        questionsList: '', // 试题类型列表
        difficultyList: '', // 困难列表
        directionList: '', // 方向列表
        inputList: '', // 录入人列表
        topicRemark: '', // 题目备注
        companyName: '' // 企业简称
      },
      formAreaList: {
        provincesList: [], // 省
        citysList: [] // 市
      },
      formArea: {
        provincesList: '', // 省
        citysList: '' // 市
      },
      // ====================以下是表格====================
      tableData: [{
        number: '', // 试题编号
        subject: '', // 学科
        catalog: '', // 目录
        catalogID: '', // 题型
        question: '', // 题干
        addDate: '', // 录入时间
        creatorID: '', // 难度
        creator: '' // 录入人
      }],
      pageTable: {
        page: 1, // 页码
        pagesize: 4 // 每页条数
      },
      nowPage: 0, // 当前页数
      roleList: [], // 角色列表
      total: 0 // 总数据
    }
  },
  created () {
    this.simple1()
    this.simple2()
    this.simple3()
    this.simple4()
    this.provinces()
    this.citys()
    // 下面表格数据
    this.list()
  },
  methods: {
    // 获得学科简单列表
    async simple1 () {
      const res = await simple1()
      this.subjectList = res.data
    },
    // 获得二级目录列表
    async simple2 () {
      const res = await simple2()
      this.secondDirectoryList = res.data
    },
    // 获得标签列表
    async simple3 () {
      const res = await simple3()
      this.tagsList = res.data
    },
    // 获得录入人列表
    async simple4 () {
      const res = await simple4()
      this.inputList = res.data
    },
    // 获得省列表
    provinces () {
      const res = provinces()
      this.formAreaList.provincesList = res
    },
    // 获得市列表
    citys (e) {
      this.formAreaList.citysList = citys(e)
      this.formArea.citys = this.formAreaList.citysList[0]
    },
    // 清除
    clear () {
      this.form = {
        subjectList: '',
        secondDirectoryList: '',
        tagsList: '',
        keywords: '',
        questionsList: '',
        difficultyList: '',
        directionList: '',
        inputList: '',
        topicRemark: '',
        companyName: ''
      }
    },
    // 搜索
    async search () {
      const result = await list({
        page: this.pageTable.page,
        pagesize: this.pageTable.pagesize,
        subjectID: this.form.subjectList, // 学科
        catalogID: this.form.secondDirectoryList, // 二级目录
        tags: this.form.tagsList, // 标签列表
        keyword: this.form.keywords // 关键字
      })
      this.total = result.data.counts
      this.tableData = result.data.items
    },
    // ==============================表格内容=============================
    // 获取基础题库
    async list () {
      const result = await list({
        page: this.pageTable.page,
        pagesize: this.pageTable.pagesize
      })
      this.total = result.data.counts
      this.tableData = result.data.items
    },
    // View
    View () {
      this.isShow = true
    },
    // Edit
    Edit (id) {
      this.$router.push(`/questions/new/?id=${id}`)
    },
    // Delect
    async Delete (data) {
      await remove({
        id: data.id
      })
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?')
        this.$message.success('删除成功')
        this.list() // 重新获取数据
      } catch (error) {
        this.$message(error)
      }
    },
    // Check
    async Check (id) {
      await choiceAdd({
        id: id,
        choiceState: 1
      })
      await remove({
        id: id
      })
      await this.list()
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?')
        this.$message.success('加入精选成功')
      } catch (error) {
        this.$message(error)
      }
    },

    // ==============================页码==================================
    // @size-change="handleSizeChange" ==> pageSize 改变时会触发 每页条数
    handleSizeChange (pagesize) {
      this.pageTable.pagesize = pagesize // 更新每页条数
      this.list() // 重新获取基础题库
    },
    // @current-change="handleCurrentChange" ==> currentPage 改变时会触发 当前页
    handleCurrentChange (nowPage) {
      this.pageTable.page = nowPage // 更新页码
      this.list() // 重新获取基础题库
    }
  }
}
</script>

<style scoped lang='less'></style>
